<template>
  <div v-loading="loading" class="app-main-content-box">
    <el-form v-if="detail" label-suffix="：" label-width="160px" size="small">
      <!--      <el-form-item label="归属商户号">{{ detail.belongMerchant }}</el-form-item>-->
      <el-form-item v-if="detail.belongMerchantName" label="归属商户名">{{
        detail.belongMerchantName
      }}
      </el-form-item>
      <el-form-item label="卡类型">{{ cardTypeOptions[detail.cardType] }}</el-form-item>
      <el-form-item label="卡名称">{{ detail.cardName }}</el-form-item>
      <el-form-item v-if="['gift'].includes(detail.cardType)" label="卡面额">{{ detail.denomination / 100 }} 元
      </el-form-item>
      <el-form-item v-if="['times'].includes(detail.cardType)" label="卡次数">{{ detail.times }} 次</el-form-item>
      <el-form-item label="可用时间">
        <!-- 总时间 -->
        <div>{{ detail.startTime + ' ~ ' + detail.endTime }}</div>
        <!-- 时间类型一 -->
        <div v-if="detail.availableTime.timeType===5">有效期内，任意时段可用</div>
        <div v-if="detail.availableTime.timeType===1">生效后 {{ detail.availableTime.days }} 天可用</div>
        <div v-if="detail.availableTime.timeType===2">
          每周指定星期：{{ detail.availableTime.availablePeriod | weekNum2WeekStr }}
        </div>
        <div v-if="detail.availableTime.timeType===3">
          每月指定日期：{{
            detail.availableTime.availablePeriod|dayNum2DayStr
          }}
        </div>
        <div v-if="detail.availableTime.timeType===4"> 范围内指定日期：
          {{
            detail.availableTime.dateList.split(',').map(function fun(v) {
              return v.replace(':', ' ~ ')
            }).join('、')
          }}
        </div>
        <div
          v-if="detail.availableTime.timeType===2||detail.availableTime.timeType===3||detail.availableTime.timeType===4"
        >
          <div v-if="detail.availableTime.startMinute1||detail.availableTime.endMinute1">
            {{ detail.availableTime.startMinute1 | mm2HHmm }} ~ {{ detail.availableTime.endMinute1 | mm2HHmm }}
          </div>
          <div v-if="detail.availableTime.startMinute2||detail.availableTime.endMinute2">
            {{ detail.availableTime.startMinute2 | mm2HHmm }} ~ {{ detail.availableTime.endMinute2 | mm2HHmm }}
          </div>
          <div v-if="detail.availableTime.startMinute3||detail.availableTime.endMinute3">
            {{ detail.availableTime.startMinute3 | mm2HHmm }} ~ {{ detail.availableTime.endMinute3 | mm2HHmm }}
          </div>
        </div>
      </el-form-item>
      <!--v-if="detail.availableTime.timeType===1"-->
      <el-form-item
        label="生效时间"
      >
        <div v-if="detail.secondDayAvailable">领取后第二天生效</div>
        <div v-else>领取后立即生效</div>
      </el-form-item>
      <el-form-item label="使用说明">
        <ul v-if="detail.description">
          <li v-for="(v,i) in detail.description.split(/[(\r\n)]+/)" :key="i">{{ v }}</li>
        </ul>
        <div v-else>无</div>
      </el-form-item>
      <el-form-item label="用户限制">
        <div v-if="detail.maxUseDay">一个自然日单用户可使用：<span v-if="['times'].includes(detail.cardType)">{{
          detail.maxUseDay
        }} 次</span><span v-if="['gift'].includes(detail.cardType)">{{ detail.maxUseDay / 100 }} 元</span></div>
        <div v-else>一个自然日单用户可使用：无限制</div>
        <div v-if="detail.maxUseWeek">一个自然周单用户可使用：<span v-if="['times'].includes(detail.cardType)">{{ detail.maxUseWeek
        }} 次</span><span
          v-if="['gift'].includes(detail.cardType)"
        >{{ detail.maxUseWeek / 100 }} 元</span></div>
        <div v-else>一个自然周单用户可使用：无限制</div>
        <div v-if="detail.maxUseMonth">一个自然月单用户可使用：<span v-if="['times'].includes(detail.cardType)">{{
          detail.maxUseMonth
        }} 次</span><span v-if="['gift'].includes(detail.cardType)">{{ detail.maxUseMonth / 100 }} 元</span></div>
        <div v-else>一个自然月单用户可使用：无限制</div>
      </el-form-item>
      <el-form-item label="核销商户">
        <div v-if="detail.verifyMerchant===1">本商户下所有店铺</div>
        <div v-else-if="detail.verifyMerchant===2">本商户和已合作商户的所有店铺</div>
        <div v-else-if="detail.verifyMerchant===3">
          <template v-for="v in verifyMerchantList">
            <div :key="v.merchant" class="last-dot">
              <div>
                <span>{{ v.name }}（{{ v.shops.length }}家门店）：</span>
                <span v-for="(shopItem,shopIndex) in v.shops" :key="shopIndex">
                  <span v-if="shopIndex!==0">、</span>
                  {{ shopItem.name }}
                </span>
              </div>
            </div>
          </template>
        </div>
      </el-form-item>
      <el-form-item v-if="['times'].includes(detail.cardType)" label="提醒规则" prop="verifyMerchant1">
        <div v-if="detail.noticeCycleFlg == 'Y'">提醒用户每间隔{{ detail.noticeCycleDays }}天到店消费1次</div>
        <div v-else>无</div>
      </el-form-item>
      <div v-if="['gift'].includes(detail.cardType)">
        <el-form-item label="核销业务">
          <template v-if="detail.verifyBusiness">
            <template v-for="v in detail.verifyBusiness.split(',')">
              <span :key="v" class="last-dot">
                <span>{{ bizCodeKeyOptions[v] }}</span>
                <span class="dot">、</span>
              </span>
            </template>
          </template>
          <span v-else>所有业务</span>
        </el-form-item>
        <el-form-item label="订单优惠标记">
          {{ detail.discountTag ? detail.discountTag.replace(/,/g, "、") : '无' }}
        </el-form-item>
      </div>
      <el-form-item label="背景主题">
        <div class="flexRSC">
          <span :style="{backgroundColor:detail.theme,height:'22px',width:'22px'}" />&nbsp;
          <span>{{ detail.theme }}</span>
        </div>
      </el-form-item>
      <el-form-item label="品牌名称">{{ detail.brandName }}</el-form-item>
      <el-form-item label="LOGO">
        <el-image
          v-if="detail.logo"
          :src="fileBaseUrl + detail.logo"
          style="width:120px;height:120px"
          fit="fill"
        />
        <el-image
          v-else
          :src="'static/icon/coupon/i-card-' +detail.cardType+'.png' "
          style="width:120px;height:120px"
          fit="fill"
        />
      </el-form-item>
      <el-form-item label="详情封面">
        <el-image
          v-if="detail.detailPage"
          :src="fileBaseUrl + detail.detailPage"
          style="width:320px;height:200px"
          fit="fill"
        />
        <span v-else>无</span>
      </el-form-item>
      <el-form-item label="条码显示">
        <div v-if="detail.scanCode===1||detail.scanCode===3">显示条形码</div>
        <div v-if="detail.scanCode===2||detail.scanCode===3">显示二维码</div>
        <div />
      </el-form-item>
      <el-form-item
        label="功能按钮"
      >
        <div v-if="!detail.functionButton">不显示功能按钮</div>
        <div v-else>
          <div>文案：{{ JSON.parse(detail.functionButtonConfig).word || '无' }}</div>
          <div>appid：{{ JSON.parse(detail.functionButtonConfig).appId || '无' }}</div>
          <div>路径：{{ JSON.parse(detail.functionButtonConfig).page || '无' }}</div>
        </div>
      </el-form-item>
    </el-form>

    <DialogEditCoupon ref="dialogEditCoupon" />
  </div>
</template>

<script>
import DialogEditCoupon from './DialogEditCard'
import { mapGetters } from 'vuex'
import { cardDetail, cardVerifyShops } from '../../../api/card'
// import { getAllVipCardList } from '@/api/vip'

export default {
  components: {
    DialogEditCoupon
  },
  props: {
    cardPrototype: {
      require: true,
      type: Object
    }
  },
  data() {
    return {
      // 配置
      cardTypeOptions: {
        times: '次卡',
        gift: '礼品卡'
      },

      predefineColors: [
        '#63B359',
        '#2C9F67',
        '#509FC9',
        '#5885CF',
        '#9062C0',
        '#D09A45',
        '#E4B138',
        '#EE903C',
        '#DD6549',
        '#CC463D'
      ],
      // 状态
      loading: false,
      // 数据
      detail: null,
      verifyMerchantList: []
    }
  },
  computed: {
    ...mapGetters(['bizCodeKeyOptions', 'fileBaseUrl'])
  },
  watch: {},
  created() {
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    /**
     * 数据组
     */
    // 初始化
    fetchData() {
      this.loading = true
      console.log(this.cardPrototype)
      Promise.all([this.getDetail()]).finally(() => {
        if (this.detail.verifyMerchant === 3) {
          this.getCardVerifyShops(this.detail.id)
        } else {
          this.loading = false
        }
      })
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    // 获取详情
    getDetail() {
      return new Promise((resolve, reject) => {
        cardDetail({ cardId: this.cardPrototype.id })
          .then((res) => {
            const detail = res.data.prototype
            detail.availableTime = res.data.availableTime
            detail.verifyMerchantList = res.data.merchants
            console.log('原数据', detail)
            this.detail = detail
          })
          .finally(() => {
            resolve()
          })
      })
    },

    // 获取核销门店
    getCardVerifyShops(cardId) {
      return new Promise((resolve, reject) => {
        this.loading = true
        cardVerifyShops({ cardId }).then(res => {
          this.verifyMerchantList = res.data
        }).finally(() => {
          this.loading = false
        })
      })
    },

    // 打开编辑
    openDialogEditCoupon() {
      this.$alert('待接口&数据开发', '温馨提示', {
        confirmButtonText: '确定',
        center: true,
        type: 'warning',
        callback: action => {}
      })
      // return
      this.$refs.dialogEditCoupon.open({ form: this.detail }).then(() => {})
    }
    /**
     * 按钮组
     */

    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.last-dot:last-child .dot {
  display: none;
}

.edit-btn {
  padding: 9px 0 !important;
}
</style>
